<template>
    <div class="app-container">

      <el-form :inline="true" :model="player" class="demo-form-inline">
        <el-form-item label="球员姓名">
          <el-input v-model="player.name" placeholder="球员姓名"></el-input>
        </el-form-item>
        <el-form-item label="球员国籍">
          <el-input v-model="player.nation" placeholder="球员姓名"></el-input>
        </el-form-item>
        <el-form-item label="球员位置">
          <el-input v-model="player.position" placeholder="球员姓名"></el-input>
        </el-form-item>
        <el-form-item label="球员号码">
          <el-input v-model="player.number" placeholder="球员姓名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="show">查询</el-button>
        </el-form-item>

      </el-form>

        <div class="chart-container">
          <div id="chart" class="chart" style="height:500px;width:100%" />
        </div>
    </div>
</template>
<script>
  import echarts from 'echarts'
  import data from '@/api/dbwork/playData'
  import player from '@/api/dbwork/player'
  export default {
    data(){
      return{
        chart:{},
        btnDisabled: false,
        value: [],
        player:{}
      }
    },
    created() {
      if(this.$route.params&&this.$route.params.id){
        const id = this.$route.params.id
        this.getData(id)
        this.getPlayer(id)
      }
    },
    methods:{
      getData(id){
        data.getData(id)
        .then(response=>{
          this.value = response.data.data
        })
      },
      getPlayer(id){
        player.getPlayerById(id)
          .then(response => {
            this.player = response.data.player
          })
      },
      show(){
        this.chart = echarts.init(document.getElementById('chart'))
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '球员雷达图'
          },
          legend: {
            data: ['球员雷达图']
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: '进球（score）', max: 20},
              { name: '传球（pass）', max: 500},
              { name: '射门（shoot）', max: 50},
              { name: '上场时间（playing ）', max: 1000},
              { name: '助攻（assist）', max: 20}
            ]
          },
          series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data: [
              {
                value: this.value,
                name: '预算分配（Allocated Budget）'
              }
            ]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        this.chart.setOption(option)
      }
    }
  }
</script>
